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Este capítulo destina-se aos iniciantes. Nele apresentaremos as ferramentas mínimas 
necessárias ao desenvolvimento de sites, comentando e mostrando os softwares 
relacionados que são instalados por padrão nos ambientes de desenvolvimento 
mais populares. Serão também mostrados alguns editores (X)HTML, editores de 
imagens e navegadores, disponíveis para download na internet e de uso gratuito. 
Se você é um desenvolvedor experiente, poderá ir para o Capítulo 2, sem prejuízo 
do aprendizado. 


1.1 Introdução 


Para desenvolver um site, você não precisa adquirir ferramentas de edição sofis- 
ticadas e dispendiosas. Particularmente, os editores do tipo WYSIWYG, que são 
tão bem-aceitos, procurados e usados, são uma ferramenta de desenvolvimento 
não-recomendada para o início do aprendizado. Tais ferramentas devem ser usadas 
apenas quando o desenvolvedor tiver total conhecimento e controle da maneira 
como geram o código. 

A sigla WYSIWYG para a expressão What You See Is What You Get é empregada 

para designar interfaces de produção em que o resultado final do desenvolvimento é 

semelhante àquele mostrado na interface do software durante a sua criação. A maioria 

dos editores de texto é desse tipo, como, por exemplo, o Microsoft Word. Nesses editores 

os textos, paginação, formatação e apresentação do documento são mostrados na tela 


durante a fase de criação, de maneira idêntica ao resultado final, quando o documento for 
impresso ou apresentado nas mídias para as quais as criações do editor se destina. 


Sites são criados com o uso de editores (X)HTML. O exemplo clássico — e o 
mais conhecido dos editores — é o Adobe Dreamweaver, uma ferramenta poderosa 
quando usada de maneira adequada. Editores (X)HTML do tipo WYSIWYG, como 
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é o Dreamweaver, permitem o desenvolvimento de um site sem conhecimento da 
(X) HTML. Os menus e os botões da interface gráfica geram automaticamente a 
marcação para todos os componentes de uma página web, desde simples parágrafos 
até scripts para o funcionamento de mecanismos de navegação ou para a inserção 
de vários tipos de mídia. Todo código é gerado de forma automática, sem que 
o fazedor de sites tenha necessidade de escrever uma linha de código sequer. Se 
você é um fazedor de sites ou está no início do aprendizado para desenvolver sites, 
recomendo vivamente não usar editores WYSIWYG na jornada para a criação de 
sites com CSS e (X)HTML. Como já afirmei, esses tipos de editores são ferramentas 
poderosas e indispensáveis na fase de produção de um site, contudo não as use 
até que esteja dominando com total segurança a codificação (X)HTML e tenha 
adquirido conhecimentos suficientes para criticar e modificar códigos gerados 
automaticamente por editores. 


Para acompanhar os exemplos contidos neste livro você vai precisar de um edi- 
tor de texto simples, um programa para visualizar sites na internet e um editor de 
imagens. Tanto o editor quanto o navegador estão instalados no seu computador 
por padrão. O editor para tratamento de imagens será necessário caso você queira 
criar ou tratar imagens, mas, para o aprendizado e a prática, ele é dispensável, e 
você poderá usar imagens existentes. Quando seu site estiver pronto, irá precisar 
de uma ferramenta para publicá-lo na internet. Ferramentas de publicação de sites 
são chamadas de Clientes FTP. 


1.2 Ambiente Windows 


Veremos, a seguir, as ferramentas nativas do ambiente Windows. Os exemplos 
mostrados baseiam-se no sistema operacional Windows XP em português. 


1.2.1 Bloco de Notas 


O editor (X)HTML padrão é o Windows Bloco de Notas mostrado na Figura 11 
e que oferece funcionalidades mínimas de edição, mas suficientes para escrever 
marcação (X)HTML. Você acessa o editor seguindo o caminho, no menu do Win- 
dows, conforme mostrado a seguir: 


Iniciar > Programas > Acessórios > Bloco de Notas 
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Arquivo Editar Formatar Exibir Ajuda 


O editor de texto padrão do Windows 
recomendado para escrever marcação HTML 


Figura 1.1 — Bloco de Notas. 


Se você é um iniciante, recomendo que use o Bloco de Notas para escrever seus 
códigos e acompanhar estudos dos exemplos mostrados aqui. E, neste caso, é uma 
boa idéia colocar o ícone do editor na barra de ferramentas do seu Windows, a fim 
de criar um atalho de acesso rápido ao editor. Na Figura 1.2 é mostrado o ícone 
padrão do Bloco de Notas. 


Figura 1.2 — Ícone do Bloco de Notas. 


Você cria um atalho de acesso rápido ao Bloco de Notas como descrito a seguir: 


1. 


4. 


Vá ao menu: Iniciar > Programas > Acessórios > Bloco de Notas. 
Clique com o botão direito do mouse sobre o ícone do editor. 


No menu de contexto que se abre, escolha: Criar atalho. Essa ação criará uma 
nova instância do ícone na caixa do menu. 


Clique e arraste a instância criada para cima da barra de ferramentas. 


É isso. Você está com a configuração de acesso rápido ao Bloco de Notas pronta 
para uso. 


1.2.2 Internet Explorer 


O navegador-padrão é o Internet Explorer, muito provavelmente já seu conhecido, 
cuja interface é mostrada na Figura 13. Vale notar que, tal como fizemos para o editor 
de texto, é uma boa idéia criar um atalho de acesso rápido na barra de ferramentas. 
Proceda de maneira idêntica àquela descrita anteriormente, acionando o menu: 
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Iniciar > Programas > Internet Explorer 


Arquivo Editar Exibir Favoritos Ferramentas Ajuda 


O NAO 270 8% m-L)! 


ndereço El C:\Documents and Settings Administrador Desktop iinterfaceIE.html 


Interface do navegador Internet Explorer 6 


d Meu computador 


Figura 1.3 — Internet Explorer. 


1.3 Ambiente Macintosh 


Para o ambiente Mac, os exemplos mostrados baseiam-se no sistema operacional 
Mac OS X, versão em inglês. 


1.3.1 TextEdit 


O editor-padrão é o TextEdit, que, ao contrário do Bloco de Notas para Windows, 
oferece funcionalidades de edição mais sofisticadas conhecidas como edição rica. 
Os recursos desse tipo de edição vêm habilitados por padrão e permitem controlar 
alguns aspectos da apresentação dos conteúdos em edição. Na Figura 14 é mos- 
trada a interface do TextEdit. 
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O editor de texto padrão do Mac OS X 
na sua versão “edição rica”. 


An € 
Figura 1.4 — TextEdit em modo de edição rica. 


Vocé precisa configurar o TextEdit para funcionar como um editor simples de 
textos. Para acessar o TextEdit, siga o caminho mostrado a seguir: 


Applications > TextEdit 
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Você configura o TextEdit para edição simples de textos como descrito a se- 
guir: 


1. Vá ao menu Applications > TextEdit > Preferences. 
2. No menu Preferences, na área New Document Attributes, marque Plain text. 


3. Feche o menu e a instância do TextEdit que está aberta. Na próxima vez em 
que você iniciar o TextEdit, ele estará configurado conforme mostrado na 
Figura 1.5. 


O 9 O + Construindo sites com CSS e OOHTML.html 
O editor de texto padrão do Mac 0S x 
na sua versão “texto simples”. 


Figura 1.5 — TextEdit em modo de edição simples. 


1.3.2 Safari 


O navegador-padrão é o Safari, cuja interface é mostrada na Figura 16. 
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Interface do navegador Safari 


Figura 1.6 — Safari. 
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1.4 Navegador-padrão 


É imprescindível que você tenha instalado em seu ambiente de desenvolvimento 
pelo menos um navegador-padrão. Recomendo fortemente a instalação do Firefox, 
pois dispõe de uma incrível quantidade de plugins auxiliares para a construção de 
sites. Você pode fazer o download do Firefox em http: //wm.mozilla.com/en-US/firefox/ 
all.html. 


1.5 Editores gratuitos 


Tendo adquirido os conhecimentos fundamentais da edição de documentos 
(X) HTML com uso das ferramentas-padráo citadas, seu próximo passo é adquirir 
ferramentas com mais recursos de edição. Existe uma variedade imensa de editores 
para download gratuito na internet, e a escolha de um deles para desenvolver seus 
sites é uma questão de gosto pessoal. 


Como orientação geral, apresento, a seguir, os endereços para download de 
algumas dessas ferramentas gratuitas. Fazer uma análise, comparação ou mesmo 
sugestão de uso de uma das ferramentas listadas é uma questão pessoal, além de 
estar fora do escopo deste livro. Assim, a escolha fica a critério de cada um... 


Editores (X)HTML 
= HTMLKit: http: //ww.htmlkit.com/download/ 
m CoffeeCup Free: http://ww.coffeecup.com/free-editor/download. php 


a Arachnophilia: http://ww.arachnoid.com/arachnophi1ia/ 


Editores de imagens 
= Gimp: http://ww.gimp.org/downloads/ 
m Picasa: http: //picasa.google.com/ 


= ImageMagic: http://www. imagemagick.org/script/download. php 


Editor CSS 


Normalmente, os editores (X)HTML já vêm com editor CSS integrado que atende 
às necessidades de edição das folhas de estilo. 
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A maioria dos editores específicos para CSS não é disponibilizada em versão 
gratuita. A Newsgator, fabricante do TopStyle, um editor CSS bem-aceito no mer- 
cado, tem uma versão gratuita do TopStylePro denominada TopStyleLite, a qual é 
acompanhada por algumas funcionalidades da versão paga e pode ser obtida em: 
http://www .newsgator.com/Individuals/TopStyle/Default.aspx 


Sobre editores 


Quer você tenha optado por um editor (X)HTML/CSS gratuito ou por um sofisticado 
editor pago, como o Dreamweaver, por exemplo, é importante não deixar de analisar 
com extremo cuidado a criação automática do código pelo editor. É fundamental 
começar com ferramentas de edição simples até estar completamente seguro do 
que está desenvolvendo, antes de optar por um editor com recursos avançados. Feita 
esta ressalva, tenho de admitir que, em fase de produção, o desenvolvedor não pode 
dispensar o uso de editores que disponham de recursos avançados. Não é viável 
nem sensato construir e manter um site de médio porte com o NotePad e o Picasa. 
Tais são ferramentas para estudo e sedimentação de conhecimentos. 


1.6 Cliente FTP 


Trata-se de uma ferramenta para publicar documentos na internet. Muitos dos edi- 
tores (X)HTML vêm com esta funcionalidade integrada. Você pode escolher entre 
uma imensa variedade de clientes FTP disponíveis para download gratuito. 


m FireFTP: http://fireftp.mozdev.org/ 
a FileZilla: http://filezilla-project.org/download. php?type=client 


= SmartFTP: http://www. smartftp.com/ 


